<template>
  <div class="user-operation margin--top content-main">
    <div class="user-operation-btn motion-to-right pointer" @click="handleEditUserInfo">修改资料</div>
    <div
      v-if="isSuperAdmin"
      class="user-operation-btn motion-to-right pointer"
      @click="handleSetHeScope"
    >设为管理员</div>
  </div>
</template>

<script>
import API from '~/interface/User';
export default {
  props: {
    self: {
      type: Object,
      required: true
    },
    info: {
      type: Object,
      required: true
    }
  },

  computed: {
    isSuperAdmin() {
      return this.self.scope === 'SP_ADMIN'
    }
  },

  methods: {
    // 修改用户资料
    handleEditUserInfo() {
      this.$router.push(`/user/modify/${this.info.uid}`);
    },
    // 设置用户权限
    handleSetHeScope() {
      if (this.info.scope === 'USER') {
        API.postSetScoped({ uid: this.info.uid, scope: 'ADMIN' }).then(res => {
          this.info.scope = 'ADMIN';
          this.$message({
            type: 'success',
            message: '已设置为管理员'
          });
        });
      } else {
        this.$msgbox.alert('该用户已是管理员, 若想设置为超管请在「后台管理/用户管理」中进行更改!')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-operation {
  padding: 10px 10px 5px;
  background-color: #fff;

  &-btn {
    margin: 5px 5px 10px;
    padding: 8px 15px;
    border: 1px solid var(--border);
  }
}
</style>